<template>
  <div class='list-unit' @click="gotoDetail">
    <p v-for="(item, index) in modelData" :key="index" :class="item.class">
      <span v-for="(opt, optIndex) in item.children" :key="optIndex" :class="opt.class">{{opt.label||info[opt.prop]||"暂无"}}</span>
    </p>
  </div>
</template>
<script>
export default {
  props:['info'],
  components: {},
  name: "",
  data() {
    return {
      modelData:[
        {
          class:"mb10",
          children:[
            {prop:"createTime",label:"",class:"date"},
            {prop:"title",label:"",class:"title ml10 mr10"},
            {prop:"",label:"查看详情",class:"ml-auto color-blue hover ft14"}
          ]
        },{
          children:[
            {prop:"",label:"",class:"time ft20 color-999"},
            {prop:"content",label:"",class:"ft16 ml10 color-999"},
          ]
        }
      ]
    };
  },
  methods: {
    /**
     * @name 查看详情
     * @description 直接使用传入的参数
     */
    gotoDetail(){
      this.$router.push({path:"/news/detail",query:{id:this.info.id}})
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.list-unit {
  border-bottom: 1px solid #f2f2f2;
  padding: 15px 0;
  p{
    display: flex;
    font-size: 28px;
    
    span:nth-child(1){
      display: inline-block;
      width: 148px;
    }
    span:nth-child(2){
      flex: 1;
    }
    span.time{
      text-align: right;
    }
  }
}
</style>